<script setup>
import {reactive, ref} from 'vue'
import {Switch,Image,Toast,Checkbox,Popup } from 'vant'
import router from '@/router'
const checkedList = reactive({
    DouYinRecoverChecked: false,
    DouYinRiverChecked: false,
    KuaiShouRecoverChecked: false,
    KuaiShouRiverChecked: false,
    xHongShuRecoverChecked: false,
    xHongShuRiverChecked: false,
    spHaoRecoverChecked: false,
    spHaoRiverChecked: false,
    storeId:JSON.parse(localStorage.getItem('shop')).shopDescription
})
const isStart = ref(false)
const start = () => {
    isStart.value = !isStart.value
    if(isStart.value){
        window.auto.execAjCode('toastLog("启动")')
        console.log('启动');
        startNow()
    }else{
        window.auto.execAjCode('toastLog("停止")')
        console.log('停止');
        stop()
    }
    showStart.value = false
}

const startNow = () => {
      auto.invoke(
        'runRobotNow',
        [{ robot: require('@/auto/robot/robot.all'),...checkedList}],
        () => {

        },
      )
    }
const stop = () => {
    console.log(auto.invoke);
      auto.invoke('robotStop', [], () => { })
}
const goLetter = () => {
    router.push('/letter')
}
const goRecover = () => {
    router.push('/recover')
}

const openStart = () => {
    console.log(isStart.value);
    console.log(checkedList);
    if(isStart.value){
        start()
    }else{
       const isAllFalseExceptStoreId = Object.entries(checkedList)
        .filter(([key]) => key !== 'storeId') // 过滤掉 'storeId'
        .every(([_, value]) => value === false);
        if(isAllFalseExceptStoreId)return Toast('请先勾选需要启动的模块')
        showStart.value = true
    }
    
}

const cancel = () => {
    showStart.value = false
}
const showStart = ref(false)

const prevent = (e) => {
    e.preventDefault()
}
</script>

<template>
    <div class="page">
        <Image class="bgc" :src="require('../../assets/img/zhoushou_bg.png')"/>
        <!-- <div class="step">
            <div class="step-item" v-for="item,index in stepList" :key="index">
                <Image class="step-img" :src="item.src" />
                <div class="step-item-bg">
                    <h5 class="step-item-h5">{{item.h5}}</h5>
                    <p class="step-item-p">{{ item.p }}</p>
                </div>
            </div>
        </div> -->
        <div class="recover" @click="goLetter">
            <div class="recover-top">
                <span style="color:red">*</span>私信话术
                <Image class="recover-top-img" :src="require('../../assets/img/all_icon_yjtou.png')"/>
            </div>
            <div class="recover-bottom">
                自动回复用户私信
            </div>
        </div>
        <div class="recover" @click="goRecover">
            <div class="recover-top">
                <span style="color:red">*</span>评论话术
                <Image class="recover-top-img" :src="require('../../assets/img/all_icon_yjtou.png')"/>
            </div>
            <div class="recover-bottom">
                自动回复用户评论
            </div>
        </div>
        <div class="grid">
            <div class="grid-item">
                <div class="grid-item-box">
                    <div class="grid-item-left">
                        <Image class="grid-img" :src="require('../../assets/img/home_icon_dyin.png')"/>
                        <p>抖音</p>
                    </div>
                    <Checkbox class="check" v-model="checkedList.DouYinRecoverChecked" checked-color="#8E54F4" icon-size="5vw"></Checkbox>
                </div>
            </div>
            <div class="grid-item">
                <div class="grid-item-box">
                    <div class="grid-item-left">
                        <Image class="grid-img" :src="require('../../assets/img/home_icon_kshou.png')"/>
                        <p>快手</p>
                    </div>
                    <Checkbox class="check" v-model="checkedList.KuaiShouRecoverChecked" checked-color="#8E54F4" icon-size="5vw"></Checkbox>
                </div>
            </div>
            <div class="grid-item">
                <div class="grid-item-box">
                    <div class="grid-item-left">
                        <Image class="grid-img" :src="require('../../assets/img/home_icon_xhshu.png')"/>
                        <p>小红书</p>
                    </div>
                    <Checkbox class="check" v-model="checkedList.xHongShuRecoverChecked" checked-color="#8E54F4" icon-size="5vw"></Checkbox>
                </div>
            </div>
            <div class="grid-item">
                <div class="grid-item-box">
                    <div class="grid-item-left">
                        <Image class="grid-img" :src="require('../../assets/img/home_icon_sphao.png')"/>
                        <p>视频号</p>
                    </div>
                    <Checkbox class="check" v-model="checkedList.spHaoRecoverChecked" checked-color="#8E54F4" icon-size="5vw"></Checkbox>
                </div>
            </div>
        </div>
        <div class="start" @click="openStart">{{isStart?'停止':'启动'}}</div>
        <Popup v-model:show="showStart" round="3.2vw">
            <div class="popup-content">
                <div class="popup-title">软件启动</div>
                <div class="popup-text">程序启动后不能使用此手机，使用此手机会导致程序自动停止</div>
                <div class="popup-btns">
                    <div class="popup-cancel" @click="cancel">取消</div>
                    <div class="popup-verify" @click="start">确认</div>
                </div>
            </div>
        </Popup>
    </div>
</template>

<style scoped>
    .page{
        position: fixed;
        overflow: visible;
        width: 100%;
        height: 100%;
        padding-bottom: 0.1vw;
        background-color: rgb(245,247,250);
    }
    .bgc{
        display: block;
        width: 100%;
        height: 48vw;
    }
        .step{
            position: absolute;
            top: 38vw;
            left: 50%;
            transform: translateX(-50%);
            width: 94vw;
            height: 19vw;
            display: flex;
            align-items: center;
            justify-content: space-around;
            background-color: #fff;
            border-radius: 2vw;
            
        }
        .step-item{
                display: flex;
                align-items: center;
            }
            .step-img{
                    width: 7vw;
                    height: 7vw;
                    margin-right: 1vw;
                }
        .step-item-bg{
                    display: flex;
                    flex-direction: column;
                }
    .step-item-h5{
            font-size: 3.73vw;
            color: rgb(48,49,51);
            margin:0;
            margin-bottom: 5vw;
        }
        .step-item-p{
            color: rgb(144,147,153);
            font-size: 3.2vw;
            margin: 0;
        }
        .recover{
            width: 94vw;
            height: 24vw;
            padding: 4vw;
            border-radius: 2.13vw;
            /* background:linear-gradient(90deg,#ffe8d9 0%,#ffffff 100%); */
            background-color: #fff;
            margin: 0 auto;
            margin-top: 4vw;
            box-sizing: border-box;
            margin-bottom: 4vw;
            
            
        }
        .recover-top{
                display: flex;
                font-weight: 500;
                font-size: 4.27vw;
                color: rgb(48,49,51);
                margin-bottom: 3vw;
                
            }
            .recover-top-img{
                    width: 6vw;
                    height: 6vw;
                }
        .recover-bottom{
                display: flex;
                font-size: 3.73vw;
                color: rgb(144,147,153);
               
            }
        .recover-bottom1{
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 3.73vw;
            color: rgb(144,147,153);
        }
        p{
            margin: 0;
            margin-right: 5vw;
        }
        .grid{
            margin: 0 3vw;
            margin-bottom: 7vw;
        }
        .grid-item{
                display: inline-block;
                width: 45.33vw;
                height: 16.53vw;
                background-color: #fff;
                padding: 4vw 3vw;
                box-sizing: border-box;
                border-radius: 3vw;
                margin: 0 3vw 3vw 0;
                text-align: center;
            }
        .grid-item-box{
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .grid-item-left{
            display: flex;
            align-items: center;
        }
        .switch-box{
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 4vw;
            font-size: 4vw;
            color: rgb(48,49,51);
            
        }
        .switch-box:last-child{
                margin: 0;
            }
    .start{
            position: fixed;
            left: 50%;
            bottom: 17vw;
            transform: translateX(-50%);
            width: 21vw;
            height: 21vw;
            background:linear-gradient(213deg,rgb(121,72,234) 0%,rgb(73,110,235) 100%);
            box-shadow: 0 0.5vw 4vw rgb(121,72,234);
            color: #fff;
            font-size: 4.27vw;
            text-align: center;
            line-height: 21vw;
            border-radius: 50%;
        }
        .grid-img{
            display: inline-block;
            width: 10vw;
            height: 10vw;
            margin-right: 1vw;
        }
        .grid-item:nth-child(2n){
            margin: 0;
        }

    .popup-content{
        width: 80vw;
        height: 50vw;
        border-radius: 3vw;
        padding: 5vw 5vw 0 5vw;
        background-color: #fff;
        box-sizing: border-box;
    }
    .popup-title{
        text-align: center;
        font-size: 4.8vw;
        font-weight: 500;
        color: rgb(48,49,51);
        margin-bottom: 5vw;
    }
    .popup-text{
        font-size: 4.27vw;
        color: rgb(69,70,74);
        margin-bottom: 5vw;
    }
    .popup-btns{
        position: absolute;
        bottom: 0;
        left: 0;
        width: 80vw;
        height: 15vw;
        display: flex;
        border-top: 0.13vw,solid,rgb(235,238,245);
    }
    .popup-cancel{
        flex: 1;
        text-align: center;
        line-height: 15vw;
        color: rgb(144,147,153);
        border-right: 0.13vw,solid,rgb(235,238,245);
    }
    .popup-verify{
        flex: 1;
        text-align: center;
        line-height: 15vw;
        color: rgb(142,84,244);
    }
    *{
      user-select: none;
      -webkit-user-select: none; /* Safari */
      -moz-user-select: none; /* Firefox */
      -ms-user-select: none; /* IE10+/Edge */
    }
    input {
      -webkit-user-select:auto; /*webkit浏览器*/
    }
</style>